<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>梅山龙宫</title>
	<style>
	
	 a{
		text-decoration: none;
	}
	
	   body {
	            font-family: Arial, sans-serif;
	            margin: 0;
	            padding: 20px;
	        }
	        .container {
	            display: flex;
	            justify-content: space-between;
	            align-items: center;
	        }
	        .image-container {
	            width: 30%;
				position: relative;
	        }
	        .info-container {
	            width: 70%;
				position: absolute;
				margin-left: 380px;
	        }
	        .price {
	            background-color: #ff7f00;
	            color: white;
	            padding: 10px;
	            text-align: center;
	            border-radius: 10px;
	        }
	        .price span {
	            font-size: 36px;
	            vertical-align: middle;
	        }
	        .price small {
	            font-size: 14px;
	        }
			
			img{
				width:360px; 
				height:340px;
			}
	
	</style>	
		
	
	</head>
	<body>
	<p><Strong>您所在的位置:&emsp;</strong><a href="#">同程首页></a>  景区门票>  湖南景区门票>  娄底景区门票>  ${param.scenic_name}门票及相关产品</p>
	<input type="hidden" id="scenic1" value="${param.scenic_name}">
	 <div class="container">
	        <div class="image-container"></div>
	        <div class="info-container">
	            <h1><span id="scenic_name"> </span><span style="color: orange;">AAAA景区</span></h1>
	            <p>洞中有山，山中有洞</p>
	            <p><strong>景点地址：</strong><span id="address"></span></p>
	            <div class="price">
					<span id="price"></span>
	                <small><a href="#">&emsp;<strong>去购票</strong></a></small>
	            </div>
	            <p><strong>精彩点评：</strong> 梅山龙宫还是值得去的。商业化不严重。与家人一起去。在门口开车去一个半小时。锦绣菜馆的菜真的不错。三个人才...<a href="#">更多</a></p>
	            <p>112条用户点评&emsp;<a href="#">我要点评</a></p>
	        </div>
	    </div>
	</body>
	<script src="static/js/jquery-3.7.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
		var scenic_name = $('#scenic1').val();
		$.ajax({
			url: "/queryName",
			method: "POST",
			data: { scenic_name: scenic_name },
			dataType: "json",
			success: function(data) {
				if (data && data.length > 0){
					var scenic = data[0];
					if (scenic.scenic_name == '梅山龙宫') {
						//从data数组中取出第一个元素
						$("#scenic_name").text(scenic.scenic_name);
						$("#address").text(scenic.scenic_address);
						$("#price").text("¥" + scenic.price + "起");
						let imgUrl = "<img src='/img/" + scenic.img + "' alt='Image 1' title='" + scenic.scenic_name + "'>";
						$('.image-container').html(imgUrl);
					}
				}else{
					console.error("No scenic data found");
				}
			},
			error: function(xhr, status, error) {
				console.error("Error fetching scenic details:", error);
			}
		});
		});
	</script>
</html>